<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app7">
				<blog-post 
				    v-for='post in posts' 
					:post="post"
					:key='post.id'
				></blog-post>
			</div>
		</body>
		<script>
			Vue.component('blog-post',{
				pros:['post'],
				template:`
				<div class="blog-post">
				      <h3>{{ post.title }}</h3>
				      <div v-html="post.content"></div>
				    </div>
				`
			})
			let app7=new Vue({
				el:'#app7',
				data:{
					posts:[
						{id:1,title:'My journey with Vue',content:'123'},
						{id:2,title:'Blogging with Vue',content:'abc'},
						{id:3,title:'Why Vue is so fun' ,content:'xyz'}
					]
				},
				methods:{
					
				}
			})	
		</script>
</html>
